<script setup lang="ts">
  import { onMounted, ref, watch } from 'vue';
  import { userLogin } from '/@/apis/userApi';
  import { useRequest } from 'vue-request';
  import { useRouter } from 'vue-router';
  import { i18nTranslate, LANG_CONFIG, setLang } from '/@/i18n';
  import { Md5 } from 'ts-md5';
  import { NotifyWarn, NotifySuccess, isNull, isEmail } from '/@/utils';
  const router = useRouter();
  const isArgee = ref(false);
  const formData = ref({ phoneOrEmail: '', password: '', areaCode: '1' });
  const registerType = ref('MAIL');
  // 提交
  const onSubmit = async () => {
    if (isNull(formData.value.phoneOrEmail) && registerType.value === 'PHONE') {
      NotifyWarn(i18nTranslate('PleaseenterPhonenumber'));
      return;
    }
    if (isNull(formData.value.phoneOrEmail) && registerType.value === 'MAIL') {
      NotifyWarn(i18nTranslate('PleaseenteryourEmail'));
      return;
    }
    if (!isEmail(formData.value.phoneOrEmail) && registerType.value === 'MAIL') {
      NotifyWarn(i18nTranslate('Pleaseentertheorrectemailaddress'));
      return;
    }
    if (isNull(formData.value.phoneOrEmail) && registerType.value === 'ACCOUNT') {
      NotifyWarn(i18nTranslate('Pleaseenteryouraccount'));
      return;
    }
    if (isNull(formData.value.password)) {
      NotifyWarn(i18nTranslate('Pleaseenteryourpassword'));
      return;
    }
    if (!isArgee.value) {
      NotifyWarn(i18nTranslate('pleasereadandunderstandtheprivacyagreement'));
      return;
    }
    const params = {
      phMail: formData.value.phoneOrEmail,
      areaCode: registerType.value === 'PHONE' ? formData.value.areaCode : '',
      password: Md5.hashStr(formData.value.password),
    };
    requestUserLogin.run(params);
  };
  const requestUserLogin = useRequest(userLogin, {
    manual: true,
    onSuccess(data: any) {
      NotifySuccess(i18nTranslate('loginSuccessful'));
      localStorage.setItem('psd', '');
      router.push('/home');
    },
    onError(data: any) {
      return;
    },
  });
  const onChangeCode = (code: string) => (formData.value.areaCode = code);
  onMounted(() => {
    // if(query.token) {
    //   setToken(query.token as string);
    //   router.push('/home');
    // }
  });
  const languagePopup = ref(false);
  const onSelect = (e: any) => {
    languagePopup.value = false;
    setLang(e.lang);
  };
  // 切换方式，数据清空
  watch(registerType, () => {
    formData.value.phoneOrEmail = '';
    formData.value.password = '';
  });
</script>
<template>
  <div class="login">
    <div class="right_box">
      <div class="lang_icon" @click="languagePopup = true">
        <Icon name="icon-shouyeyuyan" />
      </div>
      <div class="lang_icon" @click="$router.push('/me/customer')">
        <Icon name="icon-kefu" />
      </div>
    </div>
    <div class="login-top flex-between">
      <div>
        <p class="login_title">{{ $t('Login') }}</p>
      </div>
      <div class="img_box">
        <img :src="$img('me/login-bg.png')" />
      </div>
    </div>
    <div class="register_method">
      <!-- <div
        class="method"
        @click="registerType = 'PHONE'"
        :class="registerType === 'PHONE' ? 'active' : ''"
      >
        {{ $t('Phone') }}
        <div class="line">
          <img :src="$img('me/line.png')" />
        </div>
      </div> -->
      <div
        class="method"
        @click="registerType = 'MAIL'"
        :class="registerType === 'MAIL' ? 'active' : ''"
      >
        {{ $t('Email') }}
        <div class="line">
          <img :src="$img('me/line.png')" />
        </div>
      </div>
      <div
        class="method"
        @click="registerType = 'ACCOUNT'"
        :class="registerType === 'ACCOUNT' ? 'active' : ''"
      >
        {{ $t('Account') }}
        <div class="line">
          <img :src="$img('me/line.png')" />
        </div>
      </div>
    </div>
    <div class="login_form">
      <VarForm>
        <InputPhoneNumber
          v-if="registerType === 'PHONE'"
          :label="$t('Phonenumber')"
          v-model="formData.phoneOrEmail"
          :areacode="formData.areaCode"
          @change="onChangeCode"
          :placeholder="$t('PleaseenterPhonenumber')"
        />
        <InputEmail
          v-if="registerType === 'MAIL'"
          :label="$t('Email')"
          ref="formInputEmail"
          v-model="formData.phoneOrEmail"
          :placeholder="$t('PleaseenteryourEmail')"
        />
        <InputBase
          v-if="registerType === 'ACCOUNT'"
          :label="$t('Account')"
          v-model="formData.phoneOrEmail"
          :placeholder="$t('Pleaseenteryouraccount')"
        />
        <InputPassword
          :label="$t('Password')"
          v-model="formData.password"
          :placeholder="$t('Pleaseenteryourpassword')"
        />
      </VarForm>
      <div class="forgot">
        <span @click="$router.push('/me/customer')">{{ $t('Forgotyourpassword') }}</span>
      </div>
      <div class="argee_box">
        <van-checkbox v-model="isArgee">
          <p>
            {{ $t('Readandunderstood')
            }}<span class="privacy" @click="$router.push('/privacy')"> {{ $t('Privacy') }}</span>
          </p>
        </van-checkbox>
      </div>
      <LargePrimaryButton block class="submit_button" @click="onSubmit">{{
        $t('Login')
      }}</LargePrimaryButton>
      <p class="register_text">
        {{ $t('Donthaveanaccountyet')
        }}<span class="privacy" @click="$router.push('/register')"> {{ $t('Signup') }}</span>
      </p>
    </div>
    <!--语言切换弹出层 -->
    <van-action-sheet
      class="actionSheet"
      v-model:show="languagePopup"
      :actions="LANG_CONFIG"
      @select="onSelect"
    />
  </div>
</template>
<style lang="scss" scoped>
  .login {
    padding: 20px 30px 40px;
    .login-top {
      .img_box {
        width: 410px;
        height: 281px;
      }
    }
    .register_method {
      display: flex;
      margin-bottom: 36px;
      .method {
        color: rgba(255,255,255, 0.85);
        margin-right: 64px;
        position: relative;
        text-align: center;
        min-width: 90px;
        display: flex;
        flex-direction: column;
        align-items: center;
        .line {
          margin-top: 10px;
          width: 90px;
          display: none;
        }
        &.active {
          font-size: 32px;
          font-weight: 600;
          .line {
            display: block;
          }
        }
      }
    }
    .login_title {
      color: #FFFFFF;
      font-size: 48px;
      font-weight: 700;
      padding: 150px 0 65px 0;
    }

    .login_form {
      .login_form_title {
        color: rgba(255,255,255, 0.85);
        font-size: 32px;
        margin-bottom: 18px;
      }
      .forgot {
        text-align: right;
        color: rgba(255,255,255, 0.65);
        font-size: 26px;
        margin-top: -30px;
      }

      .argee_box {
        margin-top: 70px;
        margin-bottom: 24px;
        font-size: 26px;
        color: rgba(255, 255, 255, 0.45);
        .privacy {
          color: #2f73ff;
          padding-left: 10px;
          text-decoration-line: underline;
        }
      }

      .register_text {
        margin-top: 22px;
        font-size: 26px;
        color: rgba(255,255,255, 0.65);
        .privacy {
          color: #2f73ff;
          padding-left: 6px;
        }
      }
    }
    .login_type {
      padding: 12px 19px;
      display: flex;
      border-radius: 28px;
      margin-top: 20px;

      .box {
        height: 62px;
        border-radius: 10px;
        padding: 7px 36px;
        background-color: #f5f5f5;
        color: rgba(255,255,255, 0.45);
        @include center;
        &.active {
          color: #0063f5;
          background: #e5effe;
        }
      }
      .box:last-child {
        margin-left: 32px;
      }
    }
    .right_box {
      display: flex;
      justify-content: flex-end;
      .lang_icon {
        margin-left: 25px;
        .icon {
          color: rgba(255, 255, 255, 0.65);
        }
      }
    }
  }
</style>
<style lang="scss">
  .login {
    .van-checkbox__icon {
      font-size: 24px;
    }
    .van-checkbox__label {
      color: rgba(255, 255, 255, 0.45);
    }
    .van-action-sheet__content {
      padding: 50px 20px;
      background-color: #242424;
      .van-action-sheet__item {
        background-color: #242424;
        color: #ffffff;
      }
    }
  }
</style>
